<script setup lang="ts">
// 从指定路径导入Head组件，用于页面头部
import Head from "@/components/Head.vue";
import Menu from "@/components/Menu.vue";
import { useRoute } from 'vue-router';
import { computed } from 'vue';

const route = useRoute();

// 判断当前是否激活了子路由
const hasActiveChildRoute = computed(() => {
  // 当前路径不是 /Movies 或 /Movies/ 时，说明有子路由被激活
  return route.path !== '/Movies' && route.path !== '/Movies/';
});
</script>

<template>
  <Head />

  <el-container style="height: 100vh" class="menu">
    <!-- 左侧菜单 -->
    <el-aside width="250px">
      <Menu />
    </el-aside>

    <!-- 右侧主内容区 -->
    <el-main style="flex: 1; padding: 0;" class="page">
      <div class="container">
        <!-- 当有子路由激活时显示路由内容 -->
        <router-view v-if="hasActiveChildRoute" />
        <!-- 当没有子路由激活时显示欢迎信息 -->
        <div v-else class="welcome-container">
          <h1>欢迎来到电影市场分析系统</h1>
          <p>请选择左侧菜单以查看相关数据可视化内容</p>
        </div>
      </div>
    </el-main>
  </el-container>
</template>

<style scoped>

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;   /* 整个窗口禁止滚动条 */
}

/* 页面主容器样式定义 */
.page {
  position: static; /* 设置定位方式为默认静态定位 */
  width: 100vw; /* 宽度占父容器100% */
  min-height: 100vh; /* 最小高度为父容器的100% */
  background: white; /* 设置背景颜色为深灰色 */
  color: #6e6d6d; /* 设置文字颜色为白色 */
  box-sizing: border-box; /* 使用border-box盒模型 */
}

/* 内容容器样式定义 */
.container {
  min-height: 100%; /* 高度为父容器的100% */
  text-align: center; /* 文本居中对齐 */
  box-sizing: border-box; /* 使用border-box盒模型 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* 容器内h1标题样式定义 */
.container h1 {
  color: hsl(214, 58%, 61%); /* 设置标题颜色为蓝色调 */
  font-size: 2rem; /* 设置字体大小为2倍根元素字体大小 */
  margin-bottom: 20px; /* 设置下边距为20像素 */
}

/* 容器内段落样式定义 */
.container p {
  font-size: 1.2rem; /* 设置字体大小为1.2倍根元素字体大小 */
  color: #ccc; /* 设置文字颜色为浅灰色 */
}

.menu{
  background: white;
}

/* 欢迎信息容器样式 */
.welcome-container {
  flex: 1;
  display: flex;
  margin-left: -16vw;
  margin-top: -12vh;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>